<template>
  <div class="todolist">
    <header>
      <input type="text" autofocus placeholder="Enter a task..." v-model="iptValue" @keyup.enter="handleAddClick($event, 'ipt')" />
      <div id="animationDiv">
        <button id="add" @click="handleAddClick($event)">
          ➕
          <!-- <i class="iconfont icon-tianjia"></i> -->
        </button>
      </div>
    </header>
    <div class="container">
      <ul class="todo" id="todo">
        <li v-for="(item, index) in doingList" :key="item.id">
          <p>{{ item.text }}</p>
          <div class="buttons">
            <span @click="handleRemoveClick(index, $event)">
              <i class="iconfont icon-shanchu"></i>
            </span>
            <span @click="handleCheckClick(index, item, $event)">
              <i class="iconfont icon-duigou"></i>
            </span>
          </div>
        </li>
        <CutOff class="cutoff" />
        <li v-for="item in doneList" :key="item.id" class="isdone">
          <p>{{ item.text }}</p>
          <div class="buttons">
            <span @click="handleRemoveClick(index, $event, 'delete')"><i class="iconfont icon-shanchu"></i></span>
            <span @click="handleRemoveClick(index, $event, 'check', item)">
              <i class="iconfont icon-duigou"></i>
            </span>
          </div>
        </li>
      </ul>
      <ul class="todo" id="completed"></ul>
    </div>
  </div>
</template>

<script lang="ts">
import CutOff from '@/components/common/cut-off.vue'
import { ref, reactive, nextTick, onMounted, watch } from 'vue'
import { addAnimation, checkAnimation, deleteAnimation } from './animation'
export default {
  components: {
    CutOff
  },
  setup() {
    let iptValue = ref('')
    let { doingList, doneList } = reactive({
      doingList: JSON.parse(localStorage.getItem('doingList')) || [],
      doneList: JSON.parse(localStorage.getItem('doneList')) || []
    })
    watch(
      () => doneList,
      () => {
        updatelist()
      },
      { deep: true } // 深度监听的参数
    )
    watch(
      () => doingList,
      () => {
        updatelist()
      },
      { deep: true } // 深度监听的参数
    )

    // 添加
    function handleAddClick(event, type) {
      if (iptValue.value) {
        this.doingList.unshift({
          id: this.doingList.length + 1,
          text: iptValue.value,
          done: false
        })
        iptValue.value = ''
      }
      if (type) {
        addAnimation(event.target.nextElementSibling)
        return
      }
      addAnimation(event.target.parentElement)
    }
    // 移除
    function handleRemoveClick(index, event, type, item) {
      deleteAnimation(event.target.parentElement.parentElement)
      setTimeout(() => {
        if (type) {
          doneList.splice(index, 1)
          type === 'check' ? doingList.push(item) : ''
          return
        }
        doingList.splice(index, 1)
      }, 300)
    }
    // 完成
    function handleCheckClick(index, item, event) {
      // 动画
      checkAnimation(event.target)
      setTimeout(() => {
        doneList.unshift(item)
        doingList.splice(index, 1)
      }, 300)
    }
    function updatelist() {
      localStorage.setItem('doingList', JSON.stringify(doingList))
      localStorage.setItem('doneList', JSON.stringify(doneList))
    }
    return {
      handleAddClick,
      handleRemoveClick,
      handleCheckClick,
      doingList,
      doneList,
      iptValue
    }
  }
}
</script>

<style lang="scss" sscoped>
.todolist {
  background: #a99a92;
  margin: 0px auto auto auto;
  border-radius: 20px;
  box-shadow: 0 6px 30px 18px rgba(199, 199, 199, 0.75);
  transition: transform 0.3s ease-in;
  min-height: 100%;
  .cutoff {
    width: 50%;
  }
}

@media only screen and (min-width: 800px) {
  div.todolist {
    width: 45%;
  }
}

@media only screen and (min-width: 900px) {
  div.todolist {
    width: 40%;
  }
}

@media only screen and (min-width: 1100px) {
  div.todolist {
    width: 55%;
  }
}

header {
  width: 100%;
  height: 80px;
  position: relative;
  top: 0; /* needed to keep on top */
  bottom: 0;
  padding: 15px;
  z-index: 5;
  background: #b43f3f;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow: 0 2px 8px rgba(41, 10, 77, 0.5);
  input {
    font-family: Arial;
    width: 100%;
    font-size: 1rem;
    height: 50px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    float: left;
    padding-right: 70px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #fdfdfd;
    text-indent: 2%;
    outline: none;
    appearance: none;
    transition: all 0.5s ease;
  }
  input:focus {
    background: rgba(35, 14, 87, 0.5);
  }
  input::-moz-placeholder {
    color: white;
  }
  button {
    width: 50px;
    height: 50px;
    position: absolute;
    /*top: 15px; optional, it is so by default and right not needed as applied on parent! :D */
    border: 0px;
    outline: 0px;
    border-color: transparent;
    outline-style: 0px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    z-index: 1; /*to ensure its on top of container*/
    box-shadow: -2px 2px 5px rgba(41, 10, 77, 0.5);
    appearance: none;

    transition: all 0.2s ease;
  }
  button:hover {
    box-shadow: none;
    transform: scale(0.9);
  }
  button:active {
    background: rgba(191, 165, 223, 0.3);
    outline: none;
    outline-width: 0;
    outline-color: transparent;
  }
  button.rotate {
    transform: rotate(180deg);
    transition: all 0.3s ease;
  }
}

div#animationDiv {
  /*being used for mojs animation*/
  height: 50px;
  position: absolute;
  right: 15px;
  width: 50px;
}
.todo {
  list-style: none;
  li {
    background: #fff;
    color: black;
    padding: 15px;
    margin: 15px 15px 15px 15px;
    border-radius: 8px 0 8px 0;
    box-shadow: -2px 2px 4px rgba(41, 10, 77, 0.5);
    transition: all 0.2s ease-in;
    transition: opacity 0.3s ease-out;
    transition: opacity 0.2s ease-in;
    /* transition: height 0.3s ease-in; */
    opacity: 1;
    position: relative; /* so we can absolute the buttons*/
    p {
      width: 85%;
    }
    span {
      position: relative;
    }
    .icon-duigou {
      color: green;
    }
    .icon-shanchu {
      color: #b43f3f;
    }
    .buttons {
      position: absolute;
      width: 100px;
      height: 50px;
      top: 0;
      right: -1%;
      padding: 0 10px;
      // z-index: -1;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      span {
        width: 30px;
        text-align: center;
        height: 30px;
        position: relative;
      }
      span:last-of-type::before {
        content: ' ';
        width: 1px;
        height: 30px;
        background: #ccc;
        position: absolute;
        top: 0px;
        left: 0;
        z-index: -20;
      }
    }
  }
  li:hover {
    transform: scale(0.995);
    box-shadow: none;
    background: rgb(255, 241, 219);
    /* background: linear-gradient(left, rgb(255, 231, 194), rgb(255, 244, 228)); */
  }
  .isdone {
    opacity: 0.5;
  }
}
</style>
